
<template>
  <div class="box">
    <div class="box2">
      <el-form>
        <el-form-item label="用户">
          <el-input v-model="username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userpass" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="loginCheck">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { ref } from "vue";
import { useRouter } from "vue-router";
import service from "../utils/service";

const username = ref("admin");
const userpass = ref("123456");

// 使用userRouter() 得到路由对象。
const router = useRouter();

const loginCheck = () => {
  service({
    url: "/admin/login",
    method: "post",
    data: {
      adminname: username.value,
      password: userpass.value,
    }
  })
    .then(res => {
      if (res.data.code === "200") {
        ElMessage({
          message: "成功登录！亲",
          type: "success"
        })
        // 保存用户名
        sessionStorage.setItem("username", username.value);
        //保存密码
        sessionStorage.setItem("password", userpass.value);
        // 保存token
        sessionStorage.setItem("token", res.data.data.token);
        // 存储当前用户的权限
        sessionStorage.setItem("grants", JSON.stringify(res.data.data.checkedkeys));
        // 跳转到首页
        router.push("/Admin/");
      } else if (res.data.code === "10003") {
        ElMessage({
          message: "密码错误！",
          type: "error"
        });
      } else {
        ElMessage({
          message: "一脸蒙蔽！",
          type: "error"
        });
      }
    })
}

</script>
<style scoped>
.box {
  background-image: url(../img/考勤管理-登录页-背景.png);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box2 {
  width: 400px;
  height: 300px;
  margin: 200px auto;
  text-align: center;
}

.el-input {
  width: 200px;
}

.el-button {
  margin-left: 100px;
  background-color: green;
  color: white;
  border: 0;
}
</style>
